<template>
  <div id="app">
    <div class="outer">
      <hm-widget-text
        v-for="(item, key) in list"
        v-items="item"
        :key="key"
        :title="item.title"
        :flag="item.flag"
        @vFocus="focus"
        @vBlur="blur"
      />
    </div>
    <keep-alive :include="includeStr">
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
import widgetText from "@/components/widgetText.vue";
import { mapState } from "vuex";
console.log(mapState(["includeStr"]));
export default {
  data() {
    return {
      list: [
        {
          title: "外侧节点1",
          flag: false,
        },
        {
          title: "外侧节点2",
          flag: false,
        },
      ],
    };
  },
  components: {
    [widgetText.name]: widgetText,
  },
  computed: mapState(["includeStr"]),
  mounted() {
    console.log(this.includeStr);
  },
  methods: {
    focus(pointer) {
      pointer.data.flag = true;
    },
    blur(pointer) {
      pointer.data.flag = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.outer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  text-align: center;
}
</style>
